<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{__STATIC_PAHT}admin/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="{__STATIC_PAHT}admin/css/public.css" media="all">
    <style>
        .inoutCls {
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            font-size: 12px;
            background-color: #1E9FFF;
            max-width: 80px;
            border: none;
            color: #fff;
            margin-left: 10px;
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <a href="{:url('add')}">
            <button type="button" class="layui-btn add">添 加</button>
        </a>

        <div class="layui-form" style="margin-top: 20px;">
            <table class="layui-table">
                <colgroup>
                    <col width="40">
                    <col width="110">
                    <col width="130">
                    <col width="130">
                    <col width="70">
                    <col width="85">
                    <col width="85">
                    <col width="85">
                </colgroup>
                <thead>
                <tr>
                    <th>id</th>
                    <th>标题</th>
                    <th>排序</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                    <th>操作人</th>
                    <th class="text-center">状 态</th>
                    <th>操作管理</th>
                </tr>
                </thead>
                <tbody>
                <!--一级类目循环-->
                {volist  name='lists.data' id='vo'}
                <tr>
                    <td>{$vo.id}</td>
                    <td>{$vo['category_name']}</td>
                    <td>
                        <div class="layui-input-inline">
                            <input type="text" value="{$vo['sort']}" data-id="{$vo.id}" class="changeSort layui-input">
                        </div>
                    </td>
                    <td>
                         {$vo['create_time']}
                    </td>
                    <td>
                        {$vo['update_time']}
                    </td>
                    <td>{$vo['oprerate_user']}</td>

                    <td data-id="{$vo['id']}">
                        <input type="checkbox" {if $vo['status']=='1'}checked{/if} name="status" lay-skin="switch" lay-filter="switchStatus"
                               lay-text="ON|OFF">
                    </td>

                    <td>
                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete del-child" data-ptype="1"
                           lay-event="delete" data-id="{$vo.id}">删除</a>
                        <a>获取子类</a>
                    </td>
                </tr>
                {/volist}
                <!--一级类目循环 end-->
                </tbody>
            </table>
        </div>
        <div id="pages"></div>
    </div>

</div>
<script src="{__STATIC_PAHT}admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="{__STATIC_PAHT}admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="{__STATIC_PAHT}admin/js/common.js?v5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'laypage'], function () {
        var form = layui.form
            , laypage = layui.laypage;

        laypage.render({ //分页
            elem: 'pages'
            , count: 100
            , theme: '#FFB800'
            ,count: {$lists.total}
            ,limit:{$lists.per_page}
            ,curr:{$lists.current_page}
            ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                    //do something
                    location.href="?page="+obj.curr
                }
            }
        });


        // 添加 分类
        // $('.add').on('click', function () {
        //     layObj.dialog("{:url('category/add')}")
        // });

        //监听状态 更改
        form.on('switch(switchStatus)', function (obj) {
            let id = obj.othis.parent().attr('data-id');
            let status = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: '{:url("category/status")}?id=' + id + '&status=' + status,
                success: (res) => {
                    if(res.status == 1){
                        window.location.reload();
                    }else{
                        layer.msg('排序失败');
                    }
                }
            });
            return false;
        });


        function editCls(that, id, type) { // 分类修改  type 是 1 顶级  2级  3级
            let name = $(that).val();
            if (!name && (type == 1 || type == 2)) {
                return layObj.msg('分类名称不能为空')
            }
            if (!name && type == 3) { // 演示 应该放到修改回调中  进行处理
                return $(that).parent().remove()
            }
            let url = '{:url("admin/edit")}?id=' + id + '&name=' + name
            layObj.get(url, (res) => {
                if (name && res) {
                    $(that).val(name)
                }
            })
            $.ajax({
                url: '{:url("admin/edit")}?id=' + id + '&name=' + name,
                success(res) {
                    if (name && res) {
                        $(that).val(name)
                    }
                }
            })
        }

        // 删除二级分类
        $('.del-child').on('click', function () {
            let ptype = $(this).attr('data-ptype'); // fu
            let id = $(this).attr('data-id'); // fu
            let msg = '';
            if (ptype == 1) { // 等级类目
                msg = '一';
            } else if (ptype == 2) {
                msg = '二';
            }
            layObj.box(`是否删除${msg}级分类`, () => {
                let url = '{:url("admin/del")}?id=' + id
                layObj.get(url, (res) => {
                    $(this).parent().remove()
                })

            })
        })

        //排序
        $('.changeSort').on('change', function () {
            let id = $(this).attr('data-id');
            let val = $(this).val();

            if (!val) {
                return;
            }
            let url = '{:url("Category/sort")}?id=' + id + '&sort=' + val;
            //let url = 'http:www.baidu.com';
            layObj.get(url, function (res) {
                console.log(res, 'sort');
                if(res.status == 1){
                    window.location.reload();
                }else{
                    layer.msg('排序失败');
                }
            })

        })


    })
</script>
</body>
</html>
